<template>
	<view class="container">
		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
		<view class="coupon-status-list">
			<view class="coupon-status-item" v-for="(couponStatus, index) in couponStatusList" :key="index" @tap="selectStatus(index)">
				<text>{{ couponStatus.text }}</text>
			</view>
			<view class="active-bar" :animation="animationBar"></view>
		</view>

		<view class="coupon-list">
			<view class="coupon-item" v-for="(coupon, couponIdx) in couponList" :key="couponIdx">
				<view class="item-left" :class="currentCouponStatus == 1 || currentCouponStatus == 2 ? 'lose-item-style ' : 'no-use-item-style'">
					<view class="item-serration"></view>
					<view>
						<text>¥</text>
						<text style="font-size: 80rpx">{{ coupon.couponPrice }}</text>
					</view>
					<view style="font-size: 28rpx">满{{ coupon.requirePrice }}元可用</view>
				</view>
				<view class="item-right">
					<view style="height: 100rpx; padding-top: 15rpx; color: #666666; font-size: 28rpx">{{ coupon.name }}</view>
					<view style="height: 60rpx; display: flex; justify-content: space-between">
						<text style="color: #999999; font-size: 25rpx">{{ coupon.useScene }}</text>
						<text style="font-size: 25rpx" :style="{ color: currentCouponStatus == 1 || currentCouponStatus == 2 ? '#d5d5d5' : '#ff5a14' }">
							{{ coupon.useStatus }}
						</text>
					</view>
					<view style="height: 40rpx; display: flex; align-items: center; color: #999999; font-size: 20rpx; border-top: 1rpx solid #eff1f4">
						{{ coupon.obtainTime }} ~ {{ coupon.loseTime }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { listUserCoupon } from '@/api/user';
export default {
	onShow(params) {
		this.selectStatus(0);
	},
	data() {
		return {
			config: {
				title: '我的优惠券'
			},
			animationBar: {},
			currentCouponStatus: 0,
			couponStatusList: [
				{
					text: '未使用',
					status: 0
				},
				{
					text: '使用记录',
					status: 1
				},
				{
					text: '已过期',
					status: 2
				}
			],
			couponList: [],
			orderGoodsNum: 0
		};
	},
	methods: {
		convertSysOrderStatus(status) {
			return orderUtil.convertSysOrderStatus(status);
		},
		selectStatus(couponStatus) {
			const tx = couponStatus * 250;
			this.animationBar = uni.createAnimation({
				duration: 200
			});
			this.animationBar.translateX(tx + 'rpx').step();
			this.currentCouponStatus = couponStatus;
			listUserCoupon(couponStatus + 1).then((res) => {
				console.log(res.data);
				this.couponList = res.data;
				// this.couponList.forEach((order) => {
				// 	order.couponStatus = orderUtil.convertSysOrderStatus(order.couponStatus);
				// });
			});
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.container {
	background-color: #f5f5f5;
}

.coupon-status-list {
	display: flex;
	flex-direction: row;
	background-color: #fff;
	position: relative;
	font-size: 26rpx;

	.coupon-status-item {
		flex: 1;
		padding: 25rpx 0;
		color: #646566;
		text-align: center;
	}

	.active-bar {
		position: absolute;
		left: ~'calc(125rpx - 1.5em)';
		bottom: 0;
		background-color: @theme-color;
		width: 3em;
		height: 7rpx;
		border-radius: 10rpx;
	}
}

.coupon-list {
	padding: 0 20rpx;
}

.coupon-item {
	margin-top: 15rpx;
	display: flex;
	background-color: #fff;
	padding: 0 20rpx 0 10rpx;
	height: 200rpx;
	.item-left {
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	.item-right {
		flex: 2;
		padding-left: 20rpx;
	}
}
.no-use-item-style {
	background-color: @theme-color;
	.item-serration {
		background-image: linear-gradient(-45deg, @theme-color 25%, transparent 25%, transparent), linear-gradient(-135deg, @theme-color, transparent 25%, transparent),
			linear-gradient(-45deg, transparent 75%, @theme-color 75%), linear-gradient(-135deg, transparent 75%, @theme-color 75%);
	}
}
.lose-item-style {
	background-color: #d5d5d5;
	.item-serration {
		background-image: linear-gradient(-45deg, #d5d5d5 25%, transparent 25%, transparent), linear-gradient(-135deg, #d5d5d5 25%, transparent 25%, transparent),
			linear-gradient(-45deg, transparent 75%, #d5d5d5 75%), linear-gradient(-135deg, transparent 75%, #d5d5d5 75%);
	}
}
.item-serration {
	content: '';
	position: absolute;
	left: -10rpx;
	top: 0;
	display: block;
	width: 10rpx;
	height: 100%;
	background-size: 20rpx 12rpx;
	background-color: #fff;
	background-position: 100% 35%;
}
</style>
